<template>
    <n-card title="验证规则">
        <template #header-extra>
            <TableTool @add="onEdit" />
        </template>
        <Table ref="tableRef" :config="tableConfig" />
    </n-card>

    <ModalForm
        :loading="submiting"
        v-model:show="showState"
        :items="formItems"
        v-model:value="formState"
        @submit="onSubmit"
        style="width: 1000px"
    />
</template>

<script setup lang="ts">
import {
    coreRuleAdd,
    coreRuleDelete,
    coreRuleList,
    coreRuleUpdate
} from '@/apis/core/rule'
import { DeleteButton, EditButton } from '@/components/button'
import { TableConfig, Table, TableTool } from '@/components/table'
import { ICoreRule, ICoreRuleEditParameter } from '@/types/core/rule'
import { NSpace, DataTableInst, NTag, useMessage } from 'naive-ui'
import { h, ref } from 'vue'
import { typeOptions, nullableOptions } from './options'
import { FormItemsConfig, ModalForm } from '@/components/form'
import useState from '@/hooks/useState'

const message = useMessage()

const tableRef = ref<DataTableInst>()
const tableConfig: TableConfig<ICoreRule> = {
    service: coreRuleList,
    params: undefined,
    columns: [
        {
            title: 'ID',
            key: 'id'
        },
        {
            title: '名称',
            key: 'name'
        },
        {
            title: '字段',
            key: 'field'
        },
        {
            title: '类型',
            key: 'type',
            render(rowData) {
                const type = typeOptions.find(
                    (item) => item.value === rowData.type
                )
                return h(
                    NTag,
                    { size: 'small', type: type?.theme, bordered: false },
                    { default: () => type?.label }
                )
            }
        },
        {
            title: '排序',
            key: 'sort'
        },
        {
            key: '_actions',
            title: '操作',
            width: 148,
            render(rowData) {
                return h(
                    NSpace,
                    {},
                    {
                        default: () => [
                            h(DeleteButton, {
                                service: () =>
                                    coreRuleDelete({ id: rowData.id }),
                                onDone: () => tableRef.value?.run()
                            }),
                            h(EditButton, {
                                onClick: () => onEdit(rowData)
                            })
                        ]
                    }
                )
            }
        }
    ]
}

/**
 * 编辑
 */
const formItems: FormItemsConfig<ICoreRuleEditParameter> = [
    {
        field: 'type',
        label: '类型',
        component: 'RadioGroup',
        props: {
            options: typeOptions,
            'default-value': 'string',
            type: 'button'
        }
    },
    {
        field: 'name',
        label: '名称',
        component: 'Input',
        props: {
            placeholder: '应用名称',
            autofocus: true
        },
        rule: { required: true, min: 2, max: 20, trigger: ['input', 'blur'] }
    },
    {
        field: 'field',
        label: '字段',
        component: 'Input',
        props: {
            placeholder: '字段'
        },
        rule: { required: true, min: 2, max: 20, trigger: ['input', 'blur'] }
    },
    {
        field: 'placeholder',
        label: '占位',
        component: 'Input',
        props: {
            placeholder: '占位'
        },
        rule: { min: 2, max: 50, trigger: ['input', 'blur'] }
    },
    {
        field: 'nullable',
        label: '是否为空',
        component: 'RadioGroup',
        props: {
            options: nullableOptions,
            'default-value': 1
        }
    },
    {
        field: 'remark',
        label: '说明',
        component: 'VmEditor',
        props: {
            config: {
                height: '300px'
            }
        }
    }
]
const defaultState: ICoreRuleEditParameter = {
    name: '',
    field: '',
    remark: '',
    nullable: 1,
    placeholder: '',
    type: 'boolean'
}
const formState = ref<ICoreRuleEditParameter>({ ...defaultState })
const { state: showState, setState: setShowState } = useState()
function onEdit(rowData?: ICoreRule) {
    setShowState(true)

    if (rowData) {
        formState.value = { ...rowData }
    } else {
        formState.value = { ...defaultState }
    }
}

const { state: submiting, setState: setSubmiting } = useState()
function onSubmit() {
    setSubmiting(true)
    const API = formState.value.id ? coreRuleUpdate : coreRuleAdd
    API(formState.value)
        .then(() => {
            setShowState(false)
            tableRef.value?.run()
            message.success('操作成功')
        })
        .catch((e: Error) => {
            message.error(e.message)
        })
        .finally(() => setSubmiting(false))
}
</script>
